<template>
  <Dialog title="批量删除" v-model="dialogVisible">
    <div style="text-align:center;">
      <p style="font-weight:bolder;font-size:18px;">
        确定要删除以下音频么？
      </p>
      <p >
        <template v-for="(item,index) in selectedRows">
          {{item.name}}{{index < selectedRows.length - 1 ? '、' : ''}}
        </template>
      </p>
    </div>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="submitting">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { AudioApi, AudioVO } from '@/api/lm/audio'

/** 音频 表单 */
defineOptions({ name: 'DeleteAudioBatchForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const selectedRows = ref([]);
const submitting = ref(false);

const dialogVisible = ref(false) // 弹窗的是否展示

/** 打开弹窗 */
const open = async (options:any = {}) => {
  selectedRows.value = options.list;
  dialogVisible.value = true
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 提交请求
  try {
    let ids = selectedRows.value.map((item:AudioVO)=>item.id);
    submitting.value = true;
    AudioApi.deleteBatchAudio(ids).then(()=> {
      message.success(t('批量删除成功'))
      dialogVisible.value = false
      // 发送操作成功的事件
      emit('success')
    }).finally(()=> {
      submitting.value = false;
    });

  } finally {
  }
}
</script>
